<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button-group>
        <el-button type="primary" v-if="org_btn_add" icon="plus" @click="handlerEdit">添加部门</el-button>
      </el-button-group>
    </div>
    <hr>
    <el-row class="deptInfo">
       <el-col :span="8" >
         <el-tree :data="deptTree"
          node-key="id"
          default-expand-all
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
         ></el-tree>
       </el-col>
       <el-col :span="16"></el-col>
    </el-row>

    <el-dialog title="添加部门" fullscreen :visible.sync="dialogFormVisible">
      <el-button type="primary" @click="handlerAddDept">添加部门</el-button>
    </el-dialog>
    <el-dialog title="新增部门" :visible.sync="dialogDeptFormVisible">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'org',
  data () {
    return {
      org_btn_add: true,
      dialogFormVisible: false,
      dialogDeptFormVisible: false,
      deptTree: [
        {
          label: '全部',
          children: [{
            label: '销售部',
            id: 2,
            level: 2
          },{
            label: '人事部',
            id: 3,
            level: 2
          },{
            label: '采购部',
            id: 4,
            level: 2
          },{
            label: '技术部',
            id: 5,
            level: 2
          },{
            label: '库房部',
            id: 6,
            level: 2
          },{
            label: '财务部',
            id: 7,
            level: 2,
            children: [
              {
                label: '子部门',
                id: 9,
                level: 3
              }
            ]
          }
          ]
        }
      ]
    }
  },
  methods: {
    handlerEdit: function () {
      console.log('handlerEdit')
      this.dialogFormVisible = !this.dialogFormVisible
    },
    handlerAddDept: function () {
      this.dialogDeptFormVisible = !this.dialogDeptFormVisible
    },
    handleDragStart(node, ev) {
      // console.log('drag start', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      // console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      // console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      // console.log('tree drag over: ', dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      // console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // console.log('tree drop: ', dropNode.label, dropType);
    },
    allowDrop(draggingNode, dropNode, type) {
      if (draggingNode.data.level === 2) {
        return type !== 'inner';
      } else {
        return true;
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.level > 1;
    }
  }
}
</script>

<style lang="scss"> scoped>
  .deptInfo >>> .el-icon-caret-right:before {
    content: "\E62B";
  }
</style>
